<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
				list-style: none;
			}
			
			.rotation,.rotation2{
				width: 600px;
				height: 400px;
				margin: 0 auto;
				position: relative;
				margin-top: 10px;
			}
			
			.rotation>img,.rotation2>img{
				position: absolute;
				top: 0;
				opacity: 0;
				transition: 1s;
			}
			
			button{
				width: 30px;
				height: 50px;
				border-radius: 6px;
				border: 0;
				font-size: 30px;
				position: absolute;
			}
			
			button:nth-of-type(1){
				top: 50%;
				margin-top: -25px;
				left: 10px;
			}
			
			button:nth-of-type(2){
				top: 50%;
				margin-top: -25px;
				right: 10px;
			}
			
			button:hover{
				cursor: pointer;
				background: #000;
				color: #fff;
			}
			
			ul{
				width: 50px;
				display: flex;
				justify-content: space-between;
				position: absolute;
				left: 50%;
				margin-left: -25px;
				bottom: 20px;
			}
			
			li{
				width: 10px;
				height: 10px;
				border-radius: 50%;
				background: #000;
				cursor: pointer;
			}
			
			img.active{
				opacity: 1;
			}
			
			li.active{
				background: #fff;
			}
		</style>
	</head>
	<body>
		<div class="rotation">
			<img class="active" src="img/house1.jpg"/>
			<img src="img/house3.jpg"/>
			<img src="img/house4.jpg"/>
			<!--<img src="img/showsmall1.jpg"/>-->
			<button><</button>
			<button>></button>
			
			<ul>
				<li zhn="0" class="active"></li>
				<li zhn="1"></li>
				<li zhn="2"></li>
			</ul>
		</div>
		
		<div class="rotation2">
			<img class="active" src="img/house1.jpg"/>
			<img src="img/house3.jpg"/>
			<img src="img/house4.jpg"/>
			<!--<img src="img/showsmall1.jpg"/>-->
			<button><</button>
			<button>></button>
			
			<ul>
				<li zhn="0" class="active"></li>
				<li zhn="1"></li>
				<li zhn="2"></li>
			</ul>
		</div>
		
		<script type="text/javascript">
			var rota1=document.getElementsByClassName("rotation")[0];
			var rota2=document.getElementsByClassName("rotation2")[0];
			function rotation(parent){
				this.rota=parent;
				this.buts=parent.getElementsByTagName("button");
				this.lis=parent.getElementsByTagName("li");
				this.imgs=parent.getElementsByTagName("img");
//				this.rota=parent.getElementsByClassName("rotation")[0];
				this.j=0,
				this.dsq=null;
			}
			
			rotation.prototype.init=function(){
				this.bind();
				this.clock();
			}
			
			rotation.prototype.bind=function(){
				var me=this;
				for(var i=0;i<this.buts.length;i++){
					this.buts[i].onclick=function(){
						if(this.innerText==">"){
							me.animation(1);
						}else{
							me.animation(-1);							
						}
					}
				}
				
				for(var m=0;m<this.lis.length;m++){
					this.lis[m].onclick=function(){
						me.animation(undefined,this);
					}
				}
				
				this.rota.onmouseover=function(){
					me.clock();
				}
				
				this.rota.onmouseout=function(){
					me.clock();
				}
			}
			
			rotation.prototype.animation=function(num,li){
				if(num){
					this.j+=num;
//					if(this.j==this.lis.length){
//						this.j=0;
//					}else if(this.j==-1){
//						this.j=this.lis.length-1;
//					}
					this.j==this.lis.length&&(this.j=0);
					this.j==-1&&(this.j=this.lis.length-1);
				}else{
					this.j=parseInt(li.getAttribute("zhn"));
				}
				this.clear();	
				console.log(this.j);
				this.imgs[this.j].className="active";
				this.lis[this.j].className="active";
			}
			
			rotation.prototype.clear=function(){
				for(var k=0;k<this.lis.length;k++){
					this.imgs[k].className="";
					this.lis[k].className="";
				}
			}
			
			rotation.prototype.clock=function(){
				var me=this;//定时器中必须要用变量来保存this 不然指向了window
				if(this.dsq==null){
					this.dsq=setInterval(function(){
						me.animation(1);
					},2000)
				}else{
					clearInterval(this.dsq);
					this.dsq=null;
				}
				
			}
			var lunbo1=new rotation(rota1);
			var lunbo2=new rotation(rota2);
			lunbo1.init();
			lunbo2.init();
		</script>
	</body>
</html>
